﻿@page "/tabs"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Tabs
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>Tabs</strong> component.
</RadzenText>

<RadzenText Anchor="tabs#tabs-position" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8 rz-mb-6">
    Tabs position
</RadzenText>
<RadzenExample ComponentName="Tabs" Example="TabsPosition">
    <TabsPosition />
</RadzenExample>

<RadzenText Anchor="tabs#server-render-mode" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Server render mode
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Only selected tab content will be rendered.
</RadzenText>
<RadzenExample ComponentName="Tabs" Example="TabsServer">
    <TabsServer />
</RadzenExample>

<RadzenText Anchor="tabs#client-render-mode" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Client render mode
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    All tabs will be rendered initially and tab change will be performed completely using JavaScript
</RadzenText>
<RadzenExample ComponentName="Tabs" Example="TabsClient">
    <TabsClient />
</RadzenExample>


<RadzenText Anchor="tabs#tabs-modify" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    TabItems modify
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Demonstrating modifications to the TabItem collection
</RadzenText>
<RadzenExample ComponentName="Tabs" Example="TabsModify">
    <TabsModify />
</RadzenExample>
